<template>
  <div>

    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>关于我</span>
      </div>
      
      <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
        <el-form-item label="新浪微博" prop="weibo">
          <el-input v-model="form.weibo" ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" ></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <My-editor v-if="loading" ref="MyEditor" :content="form.content" :readonly="false"></My-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
  </div>
</template>
<script>
import {list , create , update , remove} from '@/api/about.js'
import MyEditor from '@/components/MyEditor'
export default {
  components:{MyEditor},
  data() {
    return {
      loading:false,
      form:{
        weibo:'',
        email:'',
        content:'',
        _id:''
      },
      rules:{
        // content: [{required: true, message: '内容不能为空', trigger: 'change'}],
      }
    }
  },
  mounted(){
    this.getList()
  },
  computed:{
  },
  methods:{
    // 列表
    getList(){
      const that = this
      list().then(function(res){
        // console.log(res)
        if(res.success){
          if(res.data.length>0){
            that.form = res.data[0]
          }
        }
        that.loading = true
      }).catch((error)=>{
        console.log(error)
        that.loading = true
      })
    },
    // 保存或修改
    onSubmit(formName){
      if(!this.$refs.MyEditor.html){
        return this.$message.error('内容不能为空')
      }
      const that = this
      let data=Object.assign(this.form)
      data.content = this.$refs.MyEditor.html
      const username =  JSON.parse(localStorage.getItem('userInfo')).username
      console.log('data',data)
      if(!this.form._id){
        data.create_by = username
        create(data).then(function(res){
          console.log(res)
          if(res.success){
            that.$message.success('保存成功')
            that.getList()
          }else{
            that.$message.error(res.message)
          }
        })
      }else{
        data._id = this.form._id
        data.update_by = username
        update(data).then(function(res){
          console.log(res)
          if(res.success){
            that.$message.success('修改成功')
            that.getList()
          }else{
            that.$message.error(res.message)
          }
        })
      }
    }
  },
}
</script>
<style scoped>

</style>
